<template>
  <ul class="tree">
    <li v-for="(node, index) in tree" :key="node.deptCode" :class="{ 'is-unfold': unfoldMap[`${level}-${node.deptCode}`] }">
      <div class="row" :class="{ 'is-selected': selectedRowIndex === `${level}-${node.deptCode}` }">
        <div @click="handleUnfold(level, index, node)" class="name ellipsis" :style="`padding-left: ${28 * (level - 1) + 10}px`" :title="node.name">
          <i :class="`img icon-${unfoldMap[`${level}-${node.deptCode}`] ? '' : 'un'}fold`" :style="`display: ${(node.children && node.children.length) || level < 3 ? 'inline-block' : 'none'}`"></i>
          {{ node.name }}
        </div>
        <div class="deadline" style="width: calc(50% - 100px)">
          <div class="ellipsis">{{ node.checkFlowList.map((item) => item.name).join(",") }}</div>
        </div>

        <!-- <div class="operate" style="width: 100px">
          <el-button @click="$emit('showUpdateOrganizationDialog', { node, type: 1, level, index })" type="primary" plain size="mini">编辑</el-button>
        </div> -->
      </div>
      <organizationTree v-bind="$attrs" v-on="$listeners" v-if="node.children" :tree="node.children" :level="level + 1"></organizationTree>
    </li>
  </ul>
</template>

<script>
export default {
  name: "organizationTree",
  props: {
    tree: { type: Array, required: true },
    level: { type: Number, default: 1 },
  },
  data() {
    return {
      list: [],
      unfoldMap: {},
      selectedRowIndex: "",
    };
  },
  created() {
    this.list = this.tree;
  },
  methods: {
    handleUnfold(level, index, node) {
      this.$set(this.unfoldMap, `${level}-${node.deptCode}`, !this.unfoldMap[`${level}-${node.deptCode}`]);
    },
  },
};
</script>

<style lang="less" scoped>
.tree {
  li {
    height: 40px;
    overflow: hidden;

    &.is-unfold {
      height: auto;
    }
  }

  .row {
    display: flex;
    padding: 8px 0;
    cursor: pointer;
    user-select: none;
    width: 100%;
    justify-content: space-between;

    & > div {
      box-sizing: border-box;
      padding: 0 10px;
      width: calc(100% / 3);
    }

    &:hover {
      background: #f5f9ff;
    }

    .name {
      box-sizing: border-box;
      //width: 390px;
      line-height: 24px;
      //padding-left: 28px;

      i {
        position: relative;
        top: 2px;
      }
    }
  }
}
</style>
<style lang="less">
.tree {
  .info {
    & > * {
      margin: 0 20px 0 0;
    }
  }
}
</style>
